第 19 天～

昨天做到了，新增項目的部分，

像這樣：

改變狀態

當我們可以成功的展示新增的項目後，

我們希望可以按一下項目，就讓他切換 完成 ｜ 未完成，

我們把焦點放到 FlatList ，

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    const backgroundColorStyle =
      index % 2 === 0 ? styles.itemEven : styles.itemOdd;
    return (
      <TouchableOpacity
        style={[styles.item, backgroundColorStyle]}
        onPress={this.changeItemStatus(item.id)}>
        <View style={[styles.tickArea]}></View>
        <Text style={[styles.itemText]}>{item.text}</Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

在 TouchableOpacity component 的 onPress 加入 changeItemStatus，

changeItemStatus = (id) => () => {
  const { list } = this.state;
  const index = list.findIndex((item) => item.id === id);

  const nowItem = list[index];

  const newStatus = nowItem.status === 'done' ? 'not done' : 'done';

  list[index] = {
    ...nowItem,
    status: newStatus,
  };

  this.setState(() => {
    return {
      list: [...list],
    };
  });
};

changeItemStatus 會先放入 item 的 id，

最後返回一個 function 放入 onPress 等待觸發，

主要在座的就是從 list 取出 item 資訊，

判斷之後的 status 並做出改變，

最後在更新 list

結果會是：

嗯... 未啥畫面不動，

...對了，還需要加入 style，

更新過後的 FlatList component

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    const backgroundColorStyle =
      index % 2 === 0 ? styles.itemEven : styles.itemOdd;
    const isDone = item.status === 'done';
    return (
      <TouchableOpacity
        style={[styles.item, backgroundColorStyle, isDone && styles.itemDone]}
        onPress={this.changeItemStatus(item.id)}>
        <View style={[styles.tickArea, isDone && styles.tick]}></View>
        <Text style={[styles.itemText, isDone && styles.doneText]}>
          {item.text}
        </Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

結果如下：

這樣我們完成了改變項目的狀態

搜尋

設定 state ， 新增 filterKey

this.state = {
  filterKey: '',
  inputValue: '',
  list: [],
};

在 FlatList component 根據 filterKey filter list

<FlatList
  data={list.filter((item) => item.text.includes(filterKey))}
  renderItem={({ item, index, separators }) => {
    const backgroundColorStyle =
      index % 2 === 0 ? styles.itemEven : styles.itemOdd;
    const isDone = item.status === 'done';
    return (
      <TouchableOpacity
        style={[styles.item, backgroundColorStyle, isDone && styles.itemDone]}
        onPress={this.changeItemStatus(item.id)}>
        <View style={[styles.tickArea, isDone && styles.tick]}></View>
        <Text style={[styles.itemText, isDone && styles.doneText]}>
          {item.text}
        </Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

在 Search 的按鈕這裡，加入 searchList function，

<TouchableOpacity style={styles.button} onPress={this.searchList}>
  <Text style={styles.buttonText}>Search</Text>
</TouchableOpacity>

searchList 根據 inputValue 更新 filterKey

searchList = () => {
  this.setState((state) => {
    return {
      filterKey: state.inputValue,
    };
  });
};

結果為：

更改列表全部狀態為完成

在 Complete All 的按鈕這裡，加入 handleCompleteAll function，

<TouchableOpacity style={styles.button} onPress={this.handleCompleteAll}>
  <Text style={styles.buttonText}>Complete All</Text>
</TouchableOpacity>

handleCompleteAll 會把所有的 list status 全部設定為 done

handleCompleteAll = () => {
  this.setState((state) => {
    return {
      list: state.list.map((item) => {
        return {
          ...item,
          status: 'done',
        };
      }),
    };
  });
};

結果為：

至此，我們的邏輯全部跟畫面連接上了